
{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}">

<div class="poll-container">
    <!-- 新增标题 -->
    <h1 class="poll-header">📊 最新投票列表</h1>

    <!-- 主内容区域 -->
    <div class="poll-content">
        {% if latest_question_list %}
            <div class="poll-list">
                {% for question in latest_question_list %}
                    <div class="poll-item">
                        <a href="{% url 'polls:detail' question.id %}" class="poll-link">
                            <span class="poll-number">#{{ forloop.counter }}</span>
                            {{ question.question_text }}
                            <span class="poll-arrow">→</span>
                        </a>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="empty-state">
                <div class="empty-icon">📭</div>
                <p class="empty-text">暂时没有可用的投票</p>
            </div>
        {% endif %}
    </div>
</div>

<style>
/* 容器样式 */
.poll-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
}

/* 标题样式 */
.poll-header {
    color: #2c3e50;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid #3498db;
}

/* 投票列表容器 */
.poll-list {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* 单个投票项 */
.poll-item {
    padding: 1.25rem;
    transition: all 0.2s ease;
    border-bottom: 1px solid #eee;
}

.poll-item:last-child {
    border-bottom: none;
}

.poll-item:hover {
    background: #f8f9fa;
    transform: translateX(5px);
}

/* 投票链接 */
.poll-link {
    display: flex;
    align-items: center;
    color: #34495e;
    text-decoration: none;
    font-size: 1.1rem;
}

.poll-link:hover {
    color: #3498db;
}

/* 编号样式 */
.poll-number {
    color: #95a5a6;
    margin-right: 1rem;
    font-weight: 500;
}

/* 右侧箭头 */
.poll-arrow {
    margin-left: auto;
    opacity: 0;
    color: #3498db;
    transition: opacity 0.2s ease;
}

.poll-item:hover .poll-arrow {
    opacity: 1;
}

/* 空状态样式 */
.empty-state {
    text-align: center;
    padding: 3rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-text {
    color: #7f8c8d;
    font-size: 1.2rem;
    margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .poll-container {
        padding: 1rem;
    }

    .poll-header {
        font-size: 1.5rem;
    }

    .poll-link {
        font-size: 1rem;
    }
}
</style>